<template>
    <div class="d-flex justify-content-center">
        <el-card class="box-card" :style="{ backgroundColor: cardBgColor, width: width  }">
            <div class="row">
                <div v-for="(item, index) in titles" 
                    :key="index" 
                    class="card_title col text-center"
                >
                    <div v-if="item.type ==='button'" class="link-primary btnCls" @click="addFrom" :style="{color:fontColor}">{{ item.title }}</div>
                    <div v-else :style="{color:fontColor}">{{ item.title }}</div>
                    
                </div>
            </div>
        </el-card>
    </div>
</template>
  
<script>
export default {
    name: 'CardTitle',
    props: {
        titles: {
            type: Array,
            required: true
        },
        cardBgColor: {
            type: String,
            default: '#b88230'
        },
        fontColor:{
            type: String,
            default: 'initial'
        },
        width: {
            type:String,
            default: '70%'
        }
    },
    setup(prop, ctx) {
        function addFrom() {
            ctx.emit("addFrom");
        }
        return {
            addFrom,
        };
    }
}
</script>
  
<style scoped>
.my_card {
    display: flex;
    justify-content: center;
    width: 100%;
}
.el-card__body {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.btnCls{
    cursor:pointer;
}
</style>